<template>
	<view class="Integral">
		<!-- 导航栏 -->
		<view class="back">
			<image class="back-img" @click="back" src="../../static/index/fanhuiblack.png" mode=""></image>
			<text class="back-name">积分</text>
		</view>
		<view class="content">
			<view class="residual-integral">
				<view class="residual-integral-top">
					<text>剩余积分</text>
					<text>10007积分</text>
				</view>
				<view class="residual-integral-bottom">
					<view class="one">
						<text>总共获得积分</text>
						<text>10007积分</text>
					</view>
					<view class="one">
						<text>已消耗积分</text>
						<text>10007积分</text>
					</view>
				</view>
			</view>
			<!-- tabs -->
			<view class="tabs-box">
				<u-tabs :list="list1" @change="change()" :scrollable='false' :current='current' inactive-color="#333333"
					active-color="#FF7200"></u-tabs>
				<view v-if="current==0" class="tbas-content-box">
					<view class="box" style="height: 247px;margin-bottom: 40rpx;">
						<view class="tbas-content-title">
							<text>获取积分详情</text>
							<text
								style="font-size: 36rpx;font-family: Source Han Sans CN;font-weight: 400;color: #1297F1;"
								@click="screen(0)">筛选</text>

						</view>
						<view class="tbas-content-box-content"
							style="height:400rpx;padding: 0 14rpx;background-color: #ffffff;" v-show="isShow">
							<scroll-view scroll-y="true" style="height: 100%;">
								<view class="u-text-center" v-for="(item,index) in list" :key='index'>
									<view class="u-text-center-left">
										<text>签到第{{item.day}}天</text>
										<text>{{item.date}}&nbsp;&nbsp;{{item.time}}</text>
									</view>
									<view class="u-text-center-right">
										+{{item.num}}
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
				<view v-if="current==1" class="tbas-content-box">
					<view class="box" style="height: 247px;margin-bottom: 40rpx;">
						<view class="tbas-content-title">
							<text style="color:#999999 ;">积分使用详情</text>
							<text
								style="font-size: 36rpx;font-family: Source Han Sans CN;font-weight: 400;color: #999999;"
								@click="screen(1)">筛选</text>

						</view>
						<view class="tbas-content-box-content"
							style="height:400rpx;padding: 0 14rpx;background-color: #ffffff;" v-show="isShow">
							<scroll-view scroll-y="true" style="height: 100%;">
								<view class="u-text-center" v-for="(item,index) in list2" :key='index'>
									<view class="u-text-center-left">
										<text>参与三等奖抽奖{{item.num}}次</text>
										<text>{{item.date}}&nbsp;&nbsp;{{item.time}}</text>
									</view>
									<view class="u-text-center-right" style="color: #333333;">
										-{{item.num2}}
									</view>
								</view>
							</scroll-view>
						</view>
					</view>

				</view>
			</view>

		</view>
		<view class="timeModel" v-show="showTime">
			

			<view class="timeModel-box">
				<view class="start-time">
					<text>开始时间</text>
					<picker mode="multiSelector" :value="dateTime" @change="changeDateTime" @columnchange="changeDateTimeColumn"
						:range="dateTimeArray">
						<view class='lableBox'>
							<view class="choose-value">{{timeStr}}</view>
						</view>
					</picker>
				</view>
				<view class="end-time">
					<text>结束时间</text>
					<picker mode="multiSelector" :value="dateTime" @change="changeDateTime2" @columnchange="changeDateTimeColumn"
						:range="dateTimeArray">
						<view class='lableBox'>
							<view class="choose-value">{{timeEnd}}</view>
						</view>
					</picker>
				</view>
				<view class="btn">
					<text style="color: #007AFF;" @click="showTime=false">确定</text>
					<text style="color: #999999;" @click="showTime=false">取消</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const {
		dateTimePicker,
		getMonthDay
	} = require('../../untis/date.js');
	export default {
		data() {
			return {
				dateTime: null,
				dateTimeArray: null,
				startYear: 2000,
				timeStr: '',//开始时间
				timeEnd:'',//结束时间
				showTime: false, //时间弹框
				isShow: true, //默认展开
				list1: [{
					name: '获取积分明细',
				}, {
					name: '积分使用明细',
				}],
				current: 0,
				list: [{
					day: '3',
					time: '15:00',
					date: '2021/11/15',
					num: '20'
				}, {
					day: '3',
					time: '15:00',
					date: '2021/11/15',
					num: '20'
				}, {
					day: '3',
					time: '15:00',
					date: '2021/11/15',
					num: '20'
				}, {
					day: '3',
					time: '15:00',
					date: '2021/11/15',
					num: '20'
				}, {
					day: '3',
					time: '15:00',
					date: '2021/11/15',
					num: '20'
				}],
				list2: [{
					num: '1',
					time: '15:00',
					date: '2021/11/15',
					num2: '50'
				}, {
					num: '1',
					time: '15:00',
					date: '2021/11/15',
					num2: '50'
				}, {
					num: '1',
					time: '15:00',
					date: '2021/11/15',
					num2: '50'
				}, {
					num: '1',
					time: '15:00',
					date: '2021/11/15',
					num2: '50'
				}, {
					num: '1',
					time: '15:00',
					date: '2021/11/15',
					num2: '50'
				}],
			}
		},
		onLoad() {
			this.initTime()
		},

		methods: {
			initTime() {
				let date = new Date();
				let endYear = date.getFullYear();
				// 获取完整的年月日 时分秒，以及默认显示的数组
				let obj = dateTimePicker(this.startYear, endYear);
				// 精确到分的处理，将数组的秒去掉
				// let lastArray = obj.dateTimeArray.pop();
				// let lastTime = obj.dateTime.pop();

				this.dateTimeArray = obj.dateTimeArray
				this.dateTime = obj.dateTime
				this.timeStr = this.createTimeStr(this.dateTimeArray, this.dateTime);
				this.timeEnd = this.createTimeEnd(this.dateTimeArray, this.dateTime);
			},

			changeDateTime(e) {
				this.dateTime = e.detail.value;
				this.timeStr = this.createTimeStr(this.dateTimeArray, this.dateTime);
				//ios时间不能用'-'解析成时间戳
			},
			changeDateTime2(e) {
				this.dateTime = e.detail.value;
				this.timeEnd = this.createTimeEnd(this.dateTimeArray, this.dateTime);
				//ios时间不能用'-'解析成时间戳
			},
			/*年,月切换时重新更新计算*/
			changeDateTimeColumn(e) {
				//let {id} = e.target;
				let {
					column,
					value
				} = e.detail;
				if (column == 0 || column == 1) {
					//直接修改数组下标视图不更新,用深拷贝之后替换数组
					let dateTime = JSON.parse(JSON.stringify(this.dateTime));
					let dateTimeArray = JSON.parse(JSON.stringify(this.dateTimeArray));
					dateTime[column] = value;
					dateTimeArray[2] = getMonthDay(dateTimeArray[0][dateTime[0]], dateTimeArray[1][dateTime[1]]);
					this.dateTime = dateTime;
					this.dateTimeArray = dateTimeArray;
				}
			},
			//创建开始时间
			createTimeStr(dateTimeArray, dateTime) {
				let timeStr = dateTimeArray[0][dateTime[0]] + '-' + dateTimeArray[1][dateTime[1]] + '-' + dateTimeArray[2][
					dateTime[2]
				] + ' ' + dateTimeArray[3][dateTime[3]] + ":" + dateTimeArray[4][dateTime[4]] + ":" + dateTimeArray[5][
					dateTime[5]
				];
				console.log(timeStr,'开始时间')
				return timeStr
			},
			//创建结束时间
			createTimeEnd(dateTimeArray, dateTime) {
				let timeEnd = dateTimeArray[0][dateTime[0]] + '-' + dateTimeArray[1][dateTime[1]] + '-' + dateTimeArray[2][
					dateTime[2]
				] + ' ' + dateTimeArray[3][dateTime[3]] + ":" + dateTimeArray[4][dateTime[4]] + ":" + dateTimeArray[5][
					dateTime[5]
				];
				console.log(timeEnd,'结束时间')
				return timeEnd
			},
			back() {
				uni.navigateBack()
			},
			change(item) {
				this.current = item
			},
			isopen(i) {
				this.isShow = !this.isShow
				console.log(i, 777777)
			},
			screen(type) {
				this.showTime = true
				console.log(type, 44444444);
			}
		}
	}
</script>

<style lang="less" scoped>
	.time-input {
		border: 1px solid #efefef;
		margin-left: 20rpx;
	}

	.timeModel {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(142, 141, 140, 0.62);
		padding: 280rpx 80rpx;

		.timeModel-box {
			width: 100%;
			height: 260rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.start-time {
				display: flex;
				height: 100rpx;
			}

			.end-time {
				display: flex;
				height: 100rpx;
			}

			.btn {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;

				text {
					flex: 1;
					text-align: center;
				}
			}
		}
	}

	.u-text-center {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #F2F2F2;
		padding-bottom: 20rpx;
		padding-top: 20rpx;

		.u-text-center-right {
			font-size: 36rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FF7200;
		}

		.u-text-center-left {
			display: flex;
			flex-direction: column;
			align-items: flex-start;

			text:first-child {
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}

			text:last-child {
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #999999;
			}
		}
	}

	.tbas-content-title {
		background: #FFFFFF;
		width: 100%;
		height: 94rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 14rpx;

		text:first-child {
			font-size: 36rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #1297F1;
		}

		text:last-child {
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #999999;
			margin-left: 20rpx;
		}
	}

	/deep/.u-tabs {
		border-radius: 20rpx;

		.u-scroll-box {
			display: flex;
		}
	}

	/deep/.u-tab-bar {
		background-color: #ff7200 !important;
	}

	.tabs-box {
		margin-top: 60rpx;

		.tbas-content-box {
			margin-top: 30rpx;
			width: 100%;
			height: auto;
			// height: 247px;
			// background: #FFFFFF;
			border-radius: 20rpx;
		}
	}

	.content {
		padding: 40rpx;

		.residual-integral {
			width: 100%;
			height: 284rpx;
			background: #F5AF46;
			border-radius: 20rpx;
			padding: 30rpx;

			.residual-integral-top {
				display: flex;
				flex-direction: column;
				border-bottom: 1px solid #DE982F;
				align-self: center;

				text:first-child {
					font-size: 36rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					margin-bottom: 20rpx;
				}

				text:last-child {
					font-size: 32rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FF7200;
					margin-bottom: 20rpx;
				}
			}

			.residual-integral-bottom {
				display: flex;
				margin-top: 15rpx;
				flex-direction: column;

				.one {
					display: flex;

					text:first-child {
						font-size: 36rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
					}

					text:last-child {
						font-size: 32rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FFFFFF;
						margin-left: 20rpx;
					}
				}
			}
		}
	}

	.Integral {
		background-color: #efefef;
	}

	.back {
		padding-top: 60rpx;
		width: 100%;
		height: 156rpx;
		display: flex;
		align-self: center;
		padding-left: 0 !important;
		padding-right: 0 !important;

		.back-img {
			width: 40rpx;
			height: 40rpx;
			margin-top: 10rpx;
		}

		.back-name {
			font-size: 18px;
			line-height: 31px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #000000;
			margin-right: 18rpx;
		}
	}
</style>
